<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录 - 考试成绩系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981',
                        accent: '#8b5cf6',
                        neutral: '#64748b',
                        success: '#22c55e',
                        warning: '#f59e0b',
                        danger: '#ef4444',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .gradient-bg {
                background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <div class="min-h-screen flex items-center justify-center p-4">
        <div class="w-full max-w-md">
            <!-- 登录卡片 -->
            <div class="bg-white rounded-2xl card-shadow overflow-hidden">
                <!-- 头部渐变区域 -->
                <div class="gradient-bg text-white p-8">
                    <div class="flex flex-col items-center">
                        <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-graduation-cap text-primary text-3xl"></i>
                        </div>
                        <h2 class="text-2xl font-bold">欢迎回来</h2>
                        <p class="mt-2 opacity-90 text-center">请登录您的账户以继续使用考试成绩系统</p>
                    </div>
                </div>
                
                <!-- 表单区域 -->
                <div class="p-8">
                    <!-- 显示flash消息 -->
                    {% with messages = get_flashed_messages() %}
                        {% if messages %}
                            {% for message in messages %}
                                <div class="mb-4 p-3 bg-green-50 text-green-600 rounded-md text-sm flex items-start">
                                    <i class="fa fa-check-circle mt-0.5 mr-2"></i>
                                    <span>{{ message }}</span>
                                </div>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}
                    
                    {% if error_message %}
                        <div class="mb-4 p-3 bg-red-50 text-red-600 rounded-md text-sm flex items-start">
                            <i class="fa fa-exclamation-circle mt-0.5 mr-2"></i>
                            <span>{{ error_message }}</span>
                        </div>
                    {% endif %}
                    
                    <form action="/login" method="POST">
                        <div class="mb-4">
                            <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-user text-gray-400"></i>
                                </div>
                                <input type="text" id="username" name="username" 
                                    class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg shadow-sm input-focus" 
                                    placeholder="请输入用户名" required>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <div class="flex justify-between items-center mb-1">
                                <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                                <a href="#" class="text-sm text-primary hover:text-primary/80">忘记密码?</a>
                            </div>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-lock text-gray-400"></i>
                                </div>
                                <input type="password" id="password" name="password" 
                                    class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg shadow-sm input-focus" 
                                    placeholder="请输入密码" required>
                            </div>
                        </div>
                        
                        <div class="flex items-center mb-6">
                            <input id="remember-me" name="remember-me" type="checkbox" 
                                class="h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary">
                            <label for="remember-me" class="ml-2 block text-sm text-gray-700">
                                记住我
                            </label>
                        </div>
                        
                        <button type="submit" 
                            class="w-full bg-primary text-white py-3 px-4 rounded-lg hover:bg-primary/90 transition-colors font-medium flex items-center justify-center space-x-2">
                            <span>登录账户</span>
                            <i class="fa fa-arrow-right"></i>
                        </button>
                    </form>
                    
                    <div class="mt-6 text-center">
                        <p class="text-sm text-gray-600">
                            还没有账户? <a href="/register" class="text-primary font-medium hover:text-primary/80">立即注册</a>
                        </p>
                    </div>
                </div>
            </div>
            
            <!-- 底部信息 -->
            <div class="mt-8 text-center text-sm text-gray-500">
                <p>&copy; 2024 考试成绩查询与分析系统. 保留所有权利.</p>
                <div class="mt-2 flex justify-center space-x-4">
                    <a href="#" class="hover:text-gray-700">隐私政策</a>
                    <span>|</span>
                    <a href="#" class="hover:text-gray-700">服务条款</a>
                    <span>|</span>
                    <a href="#" class="hover:text-gray-700">帮助中心</a>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 添加密码可见性切换功能
        document.addEventListener('DOMContentLoaded', function() {
            // 可以在后续添加密码可见性切换功能
        });
    </script>
</body>
</html>